<template>
  <div>
    <div class="container">
      <div class="handle-box">
        <el-input v-model="query.srcName" placeholder="数据名称" class="handle-input mr10"></el-input>
        <el-input v-model="query.testCaseId" placeholder="用例" class="handle-input mr10"></el-input>

        <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
        <el-button type="primary" :icon="Refresh" @click="handleReset">重置</el-button>
      </div>

      <el-table :data="csvData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column prop="id" label="编号" width="55" align="center"></el-table-column>
        <el-table-column prop="srcName" label="名称" align="center">
          <template #default="scope">
            <div @click="handleCsvDownload(scope.row.id, scope.row.dstName)" style="color: blue; cursor: pointer;">{{ scope.row.dstName }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" align="center"></el-table-column>
        <el-table-column prop="testCaseId" label="用例" align="center">
          <template #default="scope">
            <span @click="handleTestCaseClick(scope.row.testCaseId)" style="cursor: pointer; color: blue;">{{ scope.row.testCaseId }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="创建人" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
<!--        <el-table-column prop="modifier" label="修改人" align="center"></el-table-column>-->
<!--        <el-table-column prop="modifyTime" label="修改时间" align="center"></el-table-column>-->

        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button text :icon="Search" class="bg-blue" @click="drawer = true,handleCsvView(scope.row.id)" v-permiss="1">
              预览
            </el-button>
            <el-button text :icon="Delete" class="red" @click="handleCsvDelete(scope.row.id)" v-permiss="1">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

<!--      &lt;!&ndash;    抽屉展示详情&ndash;&gt;-->
<!--      <el-drawer v-model="drawer" title="数据详情" :show-close="true" :with-header="true" :size="'60%'">-->
<!--        <pre><div v-text="csvFile"></div></pre>-->
<!--      </el-drawer>-->
      <!--    抽屉展示详情-->
      <el-drawer
          v-model="drawer"
          title="数据详情"
          :show-close="true"
          :with-header="true"
          :size="'60%'"
      >
        <div class="log-content">
          <pre>{{ csvFile }}</pre>
        </div>
      </el-drawer>

      <div class="pagination">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="query.page"
            :page-size="query.size"
            :total="total"
            @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts" name="baseCsv">
import {ref, reactive, computed} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import { Plus, Search, Delete, Edit, Refresh, Top } from '@element-plus/icons-vue';
import {deleteCsv, viewCsv, getCsvList, downloadCsv} from "../api/csv";
import {CsvItem} from "../common/item";
import {viewJmx} from "../api/jmx";
import {checkToLogin, handleTestCaseClick} from "../common/push";

const drawer = ref(false);

const query = reactive({
  srcName: null,
  testCaseId: null,
  page: 1,
  size: 10
});

const csvData = ref<CsvItem[]>([]);
const total = ref(0);
const getList = () => {
  getCsvList(query).then(res => {
    checkToLogin(res.data.message);
    const code = res.data.code
    if (code != 0) {
      ElMessage.error(res.data.message);
      return false;
    }
    csvData.value = res.data.data.list;
    total.value = res.data.data.total || 10;
  });
};
getList();

// 查询操作
const handleSearch = () => {
  query.page = 1;
  getList();
};

const handleReset = () => {
  query.srcName = null;
  query.testCaseId = null;
  getList();
};

// 分页导航
const handlePageChange = (val: number) => {
  query.page = val;
  getList();
};

// 删除操作
const handleCsvDelete = async (id: number) => {
  await ElMessageBox.confirm('确定要删除吗？', '提示', {
    type: 'warning'
  });
  const res = await deleteCsv(id);
  const code = res.data.code
  if (code != 0) {
    ElMessage.error(res.data.message);
  } else {
    ElMessage.success("删除成功");
    await getList(); // 等待getList()执行完再继续
  }
};

const handleCsvDownload = async (id: number, csvName: string) => {
  if (!csvName) {
    ElMessage.error("csv数据文件不存在");
    return;
  }
  const res = await downloadCsv(id, csvName);
  if (!res.success) {
    ElMessage.error("下载失败, 请重试");
  }
}

// 预览操作
const csvFile = ref('');
const handleCsvView = async (id: number) => {
  const res = await viewCsv(id);
  csvFile.value = res.data;
};

</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 200px;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #F56C6C;
}
.green {
  color: #00a854;
}
.blue {
  color: #20a0ff;
}
.bg-blue {
  color: #409EFF;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}


/* 日志内容样式 */
.log-content {
//max-height: 500px; /* 设置最大高度 */
  overflow-y: auto; /* 允许垂直滚动 */
  background-color: #1e1e1e; /* 日志背景色 */
  color: #dcdcdc; /* 字体颜色 */
  padding: 15px; /* 内边距 */
  font-family: "Courier New", Courier, monospace; /* 等宽字体 */
  font-size: 14px; /* 字体大小 */
  border-radius: 4px; /* 边角圆滑 */
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); /* 内部阴影 */
}

/* 优化滚动条样式 */
.log-content::-webkit-scrollbar {
  width: 8px;
}

.log-content::-webkit-scrollbar-thumb {
  background-color: #888; /* 滚动条颜色 */
  border-radius: 4px; /* 滚动条圆角 */
}

.log-content::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* 滚动条悬停颜色 */
}
</style>
